<!--
 * @Description:
 * @Author: charles
 * @Date: 2021-12-19 10:04:20
 * @LastEditors: 任诗韵 mlqs_1010@qq.com
 * @LastEditTime: 2025-09-28 11:41:35
-->
<template>
  <div class="student-list">
    <!-- 搜索和筛选区域 -->
    <div class="search-filter">
      <el-input 
        v-model="searchKey" 
        placeholder="输入姓名或学号搜索" 
        prefix-icon="el-icon-search"
        style="width: 300px; margin-right: 20px;"
      />
      
      <el-select 
        v-model="genderFilter" 
        placeholder="筛选性别" 
        clearable
        style="width: 150px;"
      >
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </div>

    <!-- 学生列表表格 -->
    <el-table 
      :data="filteredList" 
      border 
      style="width: 100%; margin-top: 20px;"
      header-cell-class-name="green-header"
    >
      <el-table-column prop="id" label="学号" width="120" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="age" label="年龄" width="80" />
      <el-table-column prop="gender" label="性别" width="80" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="toDetails(scope.row.id)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'StudentList',
  data() {
    return {
      studentList: [
        { id: '2308300005', name: '王恺天', age: 21, gender: '男'},
        { id: '2308300021', name: '院凯龙', age: 21, gender: '男'},
        { id: '2308300032', name: '石洪旭', age: 21, gender: '男'},
        { id: '2308300009', name: '闫晨辉', age: 21, gender: '男'},
        { id: '2308300010', name: '任诗韵', age: 21, gender: '女'}
      ],
      searchKey: '',      // 搜索关键字
      genderFilter: ''    // 性别筛选条件
    }
  },
  computed: {
    // 筛选后的列表数据
    filteredList() {
      return this.studentList.filter(student => {
        // 搜索条件：匹配学号或姓名（不区分大小写）
        const matchesSearch = student.id.includes(this.searchKey) || 
                            student.name.toLowerCase().includes(this.searchKey.toLowerCase())
        
        // 性别筛选条件
        const matchesGender = !this.genderFilter || student.gender === this.genderFilter
        
        // 返回同时满足两个条件的结果
        return matchesSearch && matchesGender
      })
    }
  },
  methods: {
    toDetails(id) {
      this.$router.push({
        path: "/sc/student/Details",
        query: { id }
      })
    }
  }
}
</script>

<style scoped>
.student-list {
  padding: 20px;
}

.search-filter {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

/* 绿色表头样式 */
::v-deep .green-header {
  background-color: #42b983 !important;
  color: white !important;
}

::v-deep .green-header .cell {
  color: white !important;
  font-weight: bold;
}
</style>